<template>
  <!-- 这个页面是一个单独的页面只为了用这个页面的url 去下载 -->
  <div class="download-bg">
    <div class="download-conntainer download-conntainers">
      <!-- 面包屑 -->
      <div class="a-header"> </div>
      <div class="doc-setting"> </div>
      <div class="doc-content doc-contents">
        <div id="domRef" ref="domRef">
          <div class="doc-info whole-nodes" :class="isLoadings ? 'haha' : null">
            <div class="doc-item">
              <div class="bstract-table">
                <div class="title-name">收文传阅单</div>
                <a-table
                  id="tables"
                  :columns="columns"
                  :data-source="dataSource"
                  :show-header="false"
                  bordered
                  :pagination="false"
                >
                  <template #bodyCell="{ text, column, record }">
                    <!-- 标题 -->
                    <div v-if="column.dataIndex === 'title'" class="pdt2 cell-title">{{
                      text
                    }}</div>
                    <!-- 内容 -->
                    <template v-else-if="record.type === 'TextRichField' && textType * 1 === 1">
                      <div
                        v-if="record.content"
                        id="contentDom"
                        class="pdt2 cell-contents whole-node"
                        v-html="record.content"
                      >
                      </div>
                      <div v-else class="nodata"> &nbsp; </div>
                    </template>
                    <template v-else-if="record.type === 'TextRichField' && textType * 1 === 2">
                      <div
                        v-if="record.content"
                        id="contentDom"
                        class="pdt2 cell-content whole-node"
                      >
                        {{ record.content }}
                      </div>
                      <div v-else class="nodata"> &nbsp; </div>
                    </template>
                    <!-- 附件 暂时不知道啥格式 -->
                    <template v-else-if="record.type === 'DDAttachment'">
                      <div v-if="text" class="pdt2 file-info cell-contents whole-node">
                        <div v-for="i in getUrl(text)" :key="i" class="file-item">
                          <div class="whole-node" @click="previewFile(i)">
                            <span>{{ i.name }}</span>
                          </div>
                          <!-- <div @click="downloadFile(i)">
                          <svg-icon icon-class="btn_icon_download" class-name="btn-icon-download">
                          </svg-icon>
                        </div> -->
                        </div>
                      </div>
                      <div v-else class="nodata"> &nbsp; </div>
                    </template>

                    <!-- 审批流程 -->
                    <div v-else-if="record.dataIndex === 'approval'" class="pdt2 cell-approval">
                      <div class="comment whole-node">{{ record.data.notes }}</div>
                      <div class="people whole-node"
                        >{{ record.data.name
                        }}<template v-if="record.data.nodeType === 1">（发起审批） </template
                        ><template v-else>（{{ statusObj[record.data.status] }}） </template></div
                      >
                      <div class="time whole-node">{{ record.data.time }}</div>
                    </div>
                    <!-- 普通表单 -->
                    <template v-else>
                      <div v-if="text" class="pdt2 cell-content whole-node">{{ text }}</div>
                      <div v-else class="nodata">&nbsp;</div>
                    </template>
                  </template>
                </a-table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div v-if="isLoadings" class="loading-bg">
    <img :src="loadingIcon" alt="" />
  </div>
</template>
<script setup>
import { ref, defineProps, onMounted, defineExpose } from 'vue';
import html2canvas from 'html2canvas';
import JsPDF from 'jspdf';
import printJS from 'print-js';
import { getDetails, PdfConversion } from '@/api/receiveDetails';
import { useRoute, useRouter } from 'vue-router';
import { message } from 'ant-design-vue';
import store from '../../../store';

const loadingIcon = ref(require('@/assets/images/loading.gif'));
const route = useRoute();
const router = useRouter();
let isLoadings = ref(false);
let props = defineProps({
  textType: {},
  tableData: {
    // table数据
    type: Array,
    default: () => [
      {
        title: '公文标题',
        content: '等哈就开始打啥的客户'
      },
      {
        dataIndex: 'approval',
        title: '拟办',
        content: '等哈就开始打啥的客户',
        data: {
          name: '张三',
          time: '20323 2 11',
          notes: '同意 不同意'
        }
      },
      {
        title: '撒旦发射点',
        content: '等哈就开始打啥的客户'
      }
    ]
  }
});
let statusObj = ref({
  // 审批状态
  0: '未审核',
  1: '已通过',
  2: '审核中',
  3: '已撤销',
  4: '已拒绝',
  5: '已转办',
  6: '已加签',
  7: '已退回',
  8: '已废弃',
  null: ''
});
let dataSource = ref([]);
let textType = ref('');
let documentTitle = ref('');
onMounted(() => {
  window.isFininshTwo = true;
  getInit();
  setTimeout(() => {
    console.log(document.getElementById('contentDom'));
    let element = document.getElementById('contentDom');
    let h1Element = element.querySelector('h1');
    let h2Element = element.querySelector('h2');
    let h3Element = element.querySelector('h3');
    let h4Element = element.querySelector('h4');
    let h5Element = element.querySelector('h5');

    let currentFontSize = element.style.fontSize;
    if (currentFontSize === '') {
      currentFontSize = 16;
    }
    // 计算新的字体大小
    let newFontSize = currentFontSize * 1 + 10 + 'px';
    console.log(newFontSize);
    // 设置新的字体大小
    element.style.fontSize = newFontSize;
    h1Element.style.fontSize = '42px';
    h2Element.style.fontSize = '34px';
    h3Element.style.fontSize = '28.72px';
    h4Element.style.fontSize = '26px';
    h5Element.style.fontSize = '23.28px';
  }, 400);
});
function getInit() {
  store.commit('user/isLoading', true);
  getDetails(route.query.id).then(res => {
    console.log(res);
    store.commit('user/isLoading', false);
    let oaForm = res.data;
    if (oaForm.finish * 1 === 5 || oaForm.finish * 1 === 3 || oaForm.finish * 1 === 4) {
      oaForm.systemUserDtos = oaForm.systemUserDtos.filter(item => item.status * 1 !== 0);
      //  废弃状态
    }
    oaForm.contents.forEach(item => {
      if (item.componentName === 'TitleField') {
        documentTitle.value = item.content;
      }
    });
    let data = oaForm.contents.filter(item => item.label);
    data = getAllData(data);
    let usertList = []; // 审批流程所有人
    oaForm.systemUserDtos.forEach(item => {
      item?.systemUser.forEach(it => {
        if (item.status * 1 !== 2 && item.status * 1 !== 0) {
          usertList.push({
            ...it,
            status: item.status,
            reason: item.reason,
            nodeId: item.nodeId,
            nodeType: item.nodeType,
            nodeName: item.nodeName,
            createTime: item.createTime,
            multiExamineType: item.multiExamineType
          });
        }
      });
    });
    textType.value = oaForm.textType;

    let flowList = [];
    usertList.forEach(item => {
      flowList.push({
        dataIndex: 'approval',
        title: item.nodeName,
        content: '',
        data: {
          status: item.status,
          nodeType: item.nodeType,
          nodeName: item.nodeName,
          name: item.username,
          time: item.createTime,
          notes: item.reason
        }
      });
    });
    let list = [];
    data.forEach(item => {
      list.push({
        attr: item.attr,
        type: item.componentName,
        title: item.label,
        content: item.content || ''
      });
    });
    dataSource.value = [...list, ...flowList];
  });
}
function getAllData(data) {
  data.forEach(item => {
    if (item.options) {
      let list = JSON.parse(item.options);
      if (item.componentName !== 'DDMultiSelectField') {
        list.forEach(it => {
          if (item.content === it.key) {
            item.content = it.value;
          }
        });
      }
    }
  });
  return data;
}
function toOperate(val) {
  if (val === 'dowenload') {
    todownload();
  } else {
    printed();
  }
}
function toReturn() {
  router.go(-1);
}
// 打印
function printed() {
  isLoadings.value = true;
  const printHTML = document.getElementById('domRef').innerHTML;
  // // 将打印的区域赋值，进行打印
  console.log(window.document);
  window.document.body.innerHTML = printHTML;
  window.print(); // 调用window打印方法
  window.location.reload(); // 打印完成后重新加载页面
  setTimeout(() => {
    isLoadings.value = false;
  });
}
function getUrl(urlList) {
  console.log(urlList);
  let url = urlList.split('\\');
  let list = [];
  url.forEach(item => {
    list.push({
      name: item.slice(item.lastIndexOf('/') + 1),
      url: item
    });
  });
  return list;
}
const columns = [
  {
    title: 'title',
    dataIndex: 'title',
    width: '120px'
  },
  {
    title: 'content',
    dataIndex: 'content',
    width: '520px'
  }
];
// 下载
function todownload() {
  PdfConversion({ format: 'A4', url: window.location.href }).then(res => {
    console.log(res);
    if (res.code === 200) {
      downloadURL(res.data, documentTitle.value);
    } else {
      document.getElementById('tables').style.width = '1000px';
      document.getElementById('tables').style.margin = 'auto';
      // isLoadings.value = false;
      message.error('下载文件失败！');
    }
  });
}
// 下载URL并重命名
function downloadURL(urls, name) {
  const download = new XMLHttpRequest();
  download.open('GET', urls, true);
  download.responseType = 'blob';
  download.onload = function () {
    const url = window.URL.createObjectURL(download.response);
    const a = document.createElement('a');
    a.href = url;
    a.download = name;
    a.click();
  };
  download.send();
}
window.onbeforeprint = function () {
  console.log('确定打印');
  // router.go(-1);
};

// 点击取消

window.onafterprint = function () {
  console.log('取消打印');
  // router.go(-1);
};
</script>
<style lang="less" scoped>
@import './index.less';
.title-name {
  text-align: center;
  font-size: 34px;
  font-weight: 500;
  position: relative;
  // top: -31px;
  margin-bottom: 40px;
}
.table {
  border: 1px solid red;
}
.tdhaha {
  border: none !important;
  border-bottom: 1px solid black !important;
  background: #fff !important;
  border-left: 2px solid #ffffff !important;
}
.ant-table > table {
  // border-top: 1px solid red !important;
}
/deep/.ant-table-tbody {
  tr:last-child {
    td {
      border-bottom: 1px solid black !important;
    }
  }
}
/deep/ .ant-table-tbody > tr {
  td:first-child {
    border-left: 1px solid black !important;
  }
}
/deep/ .ant-table-cell {
  border-right: 1px solid black !important;
  border-top: 1px solid black !important;
}
.doc-item {
  // width: 1400px;
  margin: auto;
}
.a-header {
  display: flex;
  align-items: center;
  .return-left {
    display: flex;
    align-items: center;
    margin-right: 24px;
  }
  .title-names {
    img {
      margin-right: 10px;
      width: 14px;
      height: 14px;
    }
    cursor: pointer;
    font-size: 14px !important;
    font-family: Source Han Sans CN, Source Han Sans CN-Regular;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.6) !important;
  }

  margin: 0 auto;
  width: 1200px;
  padding: 16px 0;
  .now-name {
    font-size: 14px;
    font-family: Source Han Sans CN, Source Han Sans CN-Regular;
    font-weight: 400;
    text-align: LEFT;
    color: rgba(0, 0, 0, 0.4);
  }
}
.loading-bg {
  z-index: 2033 !important;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
  }
}
.whole-nodes {
  // width: 1200px;
  // margin: auto;
}
/deep/ .ant-table {
  width: 1100px;
  margin: auto;
}
.cell-approval {
  padding: 10px 16px;
  // min-height: 135px;
  background-color: #fff;
  font-size: 24px;
  color: rgba(0, 0, 0, 0.8);
  // line-height: 22px;
  word-break: break-all;
  .people {
    // margin-top: 28px;
    height: 22px;
    text-align: right;
  }
  .time {
    margin-top: 10px;
    height: 22px;
    text-align: right;
  }
}
.doc-setting {
  background: #fff;
  width: 100%;
  padding-right: 24px;
  // height: 50px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 72px;
  span {
    margin-right: 8px;
    font-size: 14px;
    font-family: Source Han Sans CN, Source Han Sans CN-Regular;
    color: rgba(0, 0, 0, 0.4);
  }
  .ant-btn {
    margin-left: 24px;
    border-radius: 4px;
    font-size: 14px;
    font-family: Source Han Sans CN, Source Han Sans CN-Regular;
  }
  :deep(.ant-checkbox-wrapper) {
    font-size: 14px;
    font-family: Source Han Sans CN, Source Han Sans CN-Regular;
    color: rgba(0, 0, 0, 0.8) !important;
  }
  :deep(.ant-checkbox-inner) {
    border-radius: 4px;
  }
  :deep(.ant-checkbox-checked::after) {
    border-radius: 4px;
  }
}
@media print {
  .a-header {
    display: none;
  }
  .doc-setting {
    visibility: hidden;
    // display: none;
  }
}
// @media print {
//   .doc-setting {
//     display: none;
//   }
// }

.file-item {
  padding: 10px 0;
  color: var(--themecolor);
  font-weight: 500;
  font-size: 26px;
}
.cell-contents {
  p {
    word-wrap: break-word !important;
    white-space: pre-line !important;
    overflow-wrap: break-word !important;
  }
}
.cell-title {
  // font-weight: 500;
  font-size: 24px;
}
.cell-content {
  // font-weight: 500;
  word-wrap: break-word;
  white-space: pre-line;
  overflow-wrap: break-word;
  word-break: break-all;
  font-size: 24px;
}
.pdt2 {
  padding: 1.7px 0;
}
h1 {
  font-size: 42px !important;
  font-weight: unset !important;
}
h2 {
  font-size: 34px !important;
  font-weight: unset !important;
}
h3 {
  font-size: 28.72px !important;
  font-weight: unset !important;
}
h4 {
  font-size: 26px !important;
  font-weight: unset !important;
}
h5 {
  font-size: 23.28px !important;
  font-weight: unset !important;
}
.doc-content {
  min-height: calc(100vh - 205px);
}
.doc-contents {
  padding-bottom: 0px !important;
}
.download-conntainers {
  padding-bottom: 0 !important;
}
</style>
<style scoped></style>
